<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>结构类选择器</title>
    <style>
        *{margin: 0;padding: 0;list-style-type: none;}

        /* 选中第一个子元素 */
        .box > :first-child{
            color: red;
        }
        .box > :last-child{
            color: #ccc;
        }
        /* 选中结构中的第n个  :nth-child(n) */
        .box > :nth-child(2n){
            color: aqua;
        }
        /* 选中同类标签中的第n个 没有添加限制条件的时候就没个同类标签的第n个都会选中
            所以:nth-of-type()一般配合交集选择器去使用
        */
        .box > :nth-of-type(){
            color: skyblue;
        }
    </style>
</head>
<body>
    <!-- 
        伪类选择器
        1/结构类
        2/状态类
     -->
     <div class="box">
        <div>1</div>
        <p>2</p>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <p>6</p>
        <div>7</div>
     </div>
</body>
</html>